import React, { useEffect } from 'react'
import { Card } from 'antd'
import echarts from '../../../plugin/echarts'

/* 
1.准备一个容器bass_bar，具有宽高
2.获取容器通过echarts.init()方法初始化echarts实例
3.根据个人的需求去配置图表
4.通过setOption()方法生成图表
*/

export default function Line() {
  // 配置图表
  const optionLine = {
    // 标题
    title: {
      text: '用户骑行订单'
    },
    // 提示框
    tooltip: {
      // 触发类型 触发
      trigger: 'item'
    },
    // x轴
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    // y轴
    yAxis: {
      // type属性的值是value的话，不需要去配置数据，y轴去自动取series去找数据进行图表的绘制
      type: 'value'
    },
    // 配置的主要是y轴的数据
    series: [
      {
        // 相当于y轴的名称
        name: '订单量',
        // 图表的类型 bar 是柱形图
        type: 'line',
        // y轴的值，要与x轴对应起来
        data: [1000, 2000, 1500, 3000, 2000, 1200, 4000]
      }
    ]
  }

  const intiMoreLine = {
    // 标题
    title: {
      text: '用户骑行订单'
    },
    // 图例属性
    legend: {
      data: ['摩拜', 'OFO', '小蓝车']
    },
    // 提示框
    tooltip: {
      // 触发类型 轴触发
      trigger: 'item'
    },
    // x轴
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    // y轴
    yAxis: {
      // type属性的值是value的话，不需要去配置数据，y轴去自动取series去找数据进行图表的绘制
      type: 'value'
    },
    // 配置的主要是y轴的数据
    series: [
      {
        // 相当于y轴的名称
        name: '摩拜',
        // 图表的类型 bar 是柱形图
        type: 'line',
        // y轴的值，要与x轴对应起来
        data: [1000, 20000, 1500, 3000, 20000, 12000, 40000]
      },
      {
        // 相当于y轴的名称
        name: 'OFO',
        // 图表的类型 bar 是柱形图
        type: 'line',
        // y轴的值，要与x轴对应起来
        data: [25000, 40000, 15000, 30000, 2000, 12000, 4000]
      }
    ]
  }

  function initLine() {
    const Charts = echarts.init(document.getElementById('line'))
    Charts.setOption(optionLine)
  }


  function moreLine() {
    const Charts = echarts.init(document.getElementById('more_line'))
    Charts.setOption(intiMoreLine)
  }

  useEffect(() => {
    initLine()
    // eslint-disable-next-line
  }, [])


  useEffect(() => {
    moreLine()
    // eslint-disable-next-line
  }, [])

  return (
    <div>
      <Card>
        <div id="line" style={{ height: 500 }}></div>
      </Card>

      <Card style={{ marginTop: 10 }}>
        <div id="more_line" style={{ height: 500 }}></div>
      </Card>
    </div>
  )
}
